<template>
  <el-card shadow="never">
    <template #header>
      <div class="flex justify-between items-center">
        <span>新闻中心</span>
        <div>
          <el-button type="primary" @click="add()">添加</el-button>
          <el-button type="danger" @click="batchDel()">删除</el-button>
        </div>
      </div>
    </template>

    <el-table stripe table-layout="auto" :data="tableData" @selection-change="selectChange">
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" label="#ID" prop="id" />
      <el-table-column label="标题" prop="title" />
      <el-table-column align="center" label="类型" prop="category.title" />
      <el-table-column align="center" label="图片" prop="image" width="130">
        <template #default="{ row }">
          <el-image class="w-full h-16 rounded" :src="row.image" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="推荐" prop="isHome">
        <template #default="{ row }">
          <el-switch
            v-model="row.isHome"
            :active-value="1"
            :inactive-value="0"
            @click="ishome(row)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="日期" prop="created_at" />
      <el-table-column align="center" label="操作">
        <template #default="{ row }">
          <el-link type="primary" @click="edit(row)">编辑</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pt-4"
      v-model:current-page="params.page"
      v-model:page-size="params.pre_page"
      :total="total"
      :page-sizes="totalOption"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleTotal"
      @current-change="val => (params.page = val)"
    />
  </el-card>

  <el-dialog
    v-model="visible"
    width="65%"
    :title="title"
    :before-close="dialogClose"
    :close-on-click-modal="false"
    destroy-on-close
    align-center
  >
    <!-- :style="{ overflow: 'hidden' }" -->
    <!-- 新增 / 编辑 页面组件 -->
    <h-form ref="formRef" :info="info" />
    <template #footer class="border-b">
      <span class="dialog-footer">
        <el-button type="primary" @click="submit()"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { newsList, newsUpdate, newsDelete } from '@/api'
import { useTable } from '@/hooks/useTable'
import HForm from './form.vue'
const {
  tableData,
  getTableData,
  resetTableData,
  total,
  totalOption,
  handleTotal,
  params,
  selectChange,
  handleDelete,
} = useTable(newsList)
const batchDel = () => handleDelete(newsDelete)

const dialogClose = () => (visible.value = false)

const visible = ref(false)
const title = ref('添加新闻')
let info = reactive({})

const add = () => {
  info = {}
  visible.value = true
}
const edit = async row => {
  title.value = '编辑新闻'
  info = { ...row }
  visible.value = true
}
const formRef = ref()
const submit = async () => {
  const res = await formRef.value.submit(newsUpdate, formRef.value.formRef)
  console.log('res: ', res)
  if (res) {
    resetTableData()
    dialogClose()
  }
}
</script>
